/**
* @description: 待办工单 -》 通信光缆巡视 -》 已巡视光缆/纤芯核查列表
**/
<template>
  <div class="cable-detail-wrap">
    <nav-bar class="header" back title="纤芯核查" @goBack="goBack"/>
    
    <!-- 切换tab -->
    <div class="cable-info-tab">
      <div class="info-tab-item"
           :class="currentTab === 'cable' ? ' info-tab-current': ''"
           @click="tabChange('cable')">光缆信息</div>
      <div class="info-tab-item"
           :class="currentTab === 'fibre' ? ' info-tab-current': ''"
           @click="tabChange('fibre')">纤芯信息</div>
    </div>
    
    <!-- 光缆信息 -->
    <div class="cable-info" v-if="currentTab === 'cable'">
      <plateTitle title="光缆信息" class="plate-title-1"/>
      <view class="cable-info-container">
        <van-cell-group>
          <van-cell v-for="(item,index) in taskDetail.cableDetailArr" :key="index" :title="item.title" :value="item.text" />
        </van-cell-group>
      </view>
      
      
      <plateTitle title="巡视信息" :isRequired="false" class="plate-title-1"/>
      
      <!-- 巡视照片 -->
      <view class="patrol-info-container" v-if="taskDetail.originData.fiberMsg.SERVICE_STATE === 4">
        <view>巡视照片</view>
        <van-divider dashed />
        <div v-if="files.filter(item => item.img).length === 0" style="text-align: center;">暂无数据</div>
        <div v-else class="image-wrap">
          <div class="image-list">
            <div
              class="upload-button"
              v-for="(imgItem, index) in files"
              :style="{'background-image': `url(${imgItem.bgImg})`}"
              v-if="imgItem.img"
            >
              <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandle(imgItem, index, 'PREVIEW')">
            </div>
          </div>
        </div>
      </view>
      
      <!-- 备注 -->
      <view class="remark-info-container" v-if="taskDetail.originData.fiberMsg.SERVICE_STATE === 4">
        <view>备注</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <textarea class="remark-text" disabled :value="taskDetail.originData.fiber_exam_msg.REMARK">
          </textarea>
        </div>
      </view>
      
      
      <!-- 巡视结果 -->
      <view class="result-info-container">
        <van-cell-group>
          <van-cell v-for="(item,index) in taskDetail.tourDetailArr" :key="index" :title="item.title" :value="item.text" :class="item.color"/>
        </van-cell-group>
      </view>
      <van-button block v-if="isEditable" @click="reEdit">重新编辑</van-button>

    </div>
    
    <!-- 纤芯信息 -->
    <div class="fibre-info" v-else>
      <div class="fibre-rate">
        <!-- 进度条 -->
        <div class="progress-bar">
          <div class="bar-title">已完成</div>
          <div class="bar-chart">
            <div class="bar-chart-off" :style="{width: (fiberDetail.fiber_exam_state.VER / fiberDetail.fiber_exam_state.TOTAL) * 100 + '%'}"></div>
          </div>
          <div class="bar-text">
            <span class="bar-off">{{fiberDetail.fiber_exam_state.VER}}/</span>
            <span class="bar-all">{{fiberDetail.fiber_exam_state.TOTAL}}</span>
          </div>
        </div>
      </div>
  
      <!-- 统计信息 -->
      <div class="fibre-rate-info" v-if="isFinished">
        <div class="info-item">
          <div class="value">{{fiberDetail.fiber_exam_state.FREE}}</div>
          <div class="label">空余纤芯</div>
        </div>
        <div class="info-item">
          <div class="value">{{fiberDetail.fiber_exam_state.FREE_RATE}}</div>
          <div class="label">纤芯空闲率</div>
        </div>
        <div class="info-item">
          <div class="value">{{fiberDetail.fiber_exam_state.USED}}</div>
          <div class="label">已使用纤芯</div>
        </div>
        <div class="info-item">
          <div class="value">{{fiberDetail.fiber_exam_state.USED_RATE}}</div>
          <div class="label">纤芯使用率</div>
        </div>
      </div>
      
      <div class="fibre-content-title">
        <plateTitle title="纤芯列表">
          <div class="condition-bar" v-if="!isFinished">
            <div class="condition-item"
                 :class="{'condition-item-checked': currentFiberTypeTab==='全部'}"
                 @click="currentFiberTypeTab='全部'">全部 {{fiberDetail.fiber_exam_count.TOTAL}}</div>
            <div class="condition-item"
                 :class="{'condition-item-checked': currentFiberTypeTab==='未核查'}"
                 @click="currentFiberTypeTab='未核查'">未核查 {{fiberDetail.fiber_exam_count.NOT_VER}}</div>
            <div class="condition-item"
                 :class="{'condition-item-checked': currentFiberTypeTab==='已核查'}"
                 @click="currentFiberTypeTab='已核查'">已核查 {{fiberDetail.fiber_exam_count.VER}}</div>
          </div>
        </plateTitle>
      </div>
      
      <div class="fibre-pair-list">
        <div class="fibre-pair-item"
             v-show="currentFiberTypeTab===item.TOUR_STATE_NAME || currentFiberTypeTab==='全部'"
             v-for="(item, index) in fiberDetail.fiber_exam_list"
             :key="index">
          <div class="fibre-pair-detail">
            <div class="replace-index">{{item.CORE_NAME}}</div>
            <div class="replace-text">{{item.IS_OCCUPY === '6' ? '纤芯保护': (item.IS_OCCUPY === '5' ? '未占用' : item.ISOCCUTYNAME)}}</div>
            <div class="replace-state" @click="jump(item)"
                :class="item.TOUR_STATE===0 ? 'replace-state-off' : 'replace-state-on'">{{item.TOUR_STATE_NAME}}</div>
          </div>
          
          <hr class="replace-hr">
          <view class="top-replace-main" v-if="item.LENGTH">
            <text class="replace-big-ltitle">测试长度（KM）:</text>
            <text class="replace-small-ltitle">{{ item.LENGTH }}</text>
          </view>
          <view class="top-replace-main" v-if="item.LOSS">
            <text class="replace-big-ltitle">全程总损耗:</text>
            <text class="replace-small-ltitle">{{ item.LOSS }}</text>
          </view>
          <view class="top-replace-main" v-if="item.LIGHT_NAME">
            <text class="replace-big-ltitle">光路:</text>
            <text class="replace-small-ltitle">{{ item.LIGHT_NAME }}</text>
          </view>
          <view class="top-replace-main" v-if="item.LABEL">
            <text class="replace-big-ltitle">标签:</text>
            <text class="replace-small-ltitle">{{ item.LABEL }}</text>
          </view>
        </div>

      </div>
    </div>
  
    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
      <van-swipe>
        <div v-for="(image, index) in files" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <div style="width: 100%; text-align: center;">{{ image.previewName }}</div>
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
  </div>
</template>

<script>
import config from "../../../../../common/config";
import navBar from "../../../../../components/common/nav-bar";
import plateTitle from '../../../../../components/business/plateTitle.vue';
import {Dialog} from "vant";
import {mapGetters} from "vuex";
import { merge } from "lodash";


// 光缆条目对应
let map_cable = {
  "NAME": "光缆名称",   //光缆名称
  "A_SITE_NAME": "起点名称",   //起点名称
  "Z_SITE_NAME": "终点名称",        //终点名称
  "VOLTAGE_CLASS": "电压等级",       //电压等级
  "OPTICALORDER": "光缆顺序",  //光缆顺序
  "FIBER_TYPE": "光缆种类",  //光缆种类
  "POWER_LINE": "所属线路",   //所属线路
  "LENGTH": "长度(Km)", //长度(Km)
  "LINE_NUMBER": "纤芯总数",   //纤芯总数
  "RUN_STATE": "运行状态"     // 运行状态
}

// 巡视条目对应
let map_tour = {
  "XSJG": "巡视结果",      //设备状态（1 一致  2  不存在  3  新增   4  更新）
  "TOUR_OPER_NAME": "巡视人", //巡视人姓名
  "TOUR_TIM": "巡视时间",   //巡视时间
}

let fileTemplate = [
  {
    name: "EQUIPMENT.jpg",
    previewName: "设备照片",
    type: "EQUIPMENT",
    bgImg: require("../../../../../static/img/bg_shebei.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "NAMEPLATE.jpg",
    previewName: "铭牌照片",
    type: "NAMEPLATE",
    bgImg: require("../../../../../static/img/bg_mingpai.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "OTHER.jpg",
    previewName: "其他照片",
    type: "OTHER",
    bgImg: require("../../../../../static/img/bg_qita.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
];

// 已完成-纤芯列表头部统计
let map_rate = {
  "FREE": "空余纤芯",
  "FREE_RATE": "纤芯空闲率",
  "USED": "已使用纤芯",
  "USED_RATE": "纤芯使用率"
}

export default {
  name: "cableDetail", // 通信光缆详情
  data () {
    return {
      currentTab: "fibre", // 当前显示内容 fibre-纤芯 cable-光缆
      currentFiberTypeTab: "全部", // 当前纤芯列表类型 全部/未核查/已核查
      taskDetail: {}, // 光缆详情
      files: {}, // 照片map
      fiberDetail: {  // 纤芯详情
        fiber_exam_state: {}, // 头部进度条统计的两个数
        fiber_exam_list: {},  // 纤芯列表
        fiber_exam_count: {}  // 纤芯状态统计
      },
      baseUrl: "", // 基础url
      objId:'',// 巡视id
      taskId: '', // 主工单id
      isFinished: false, // 纤芯是否核查完毕
      isEditable: false, // 是否可重新编辑
      showPreview: false, // 图片预览
    }
  },
  components: {
    navBar,
    plateTitle,
  },
  computed: {
    ...mapGetters(["userData"]),
  },
  onLoad (options) {
    this.objId = options.tourId;
    this.files = JSON.parse(JSON.stringify(fileTemplate));
    this.getCableInfo();
    // this.getFiberInfo();
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
    })
  },
  onShow () {
    this.getCableInfo();
  },
  methods: {
    tabChange(currentTab) {
      this.currentTab = currentTab;
      this.getCableInfo();
      // (currentTab === "fibre") && (this.getFiberInfo());
      // (currentTab === "cable") && (this.getCableInfo());
    },
    // 循环滚动判断
    // isLoop(index) {
    //   this.$nextTick(() => {
    //     let containerWith = 645 / 1080 * window.innerWidth;
    //     if(this.$refs.loopText[index].offsetWidth > containerWith) {
    //       this.$refs.loopText[index].className = 'loop';
    //     }
    //   })
    // },
    goBack() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/cableTour/cableTour?taskId=${this.taskDetail.originData.fiberMsg.TASK_ID}`
      });
    },
    // 获取光缆详情
    getCableInfo() {
      this.$api.getFiberMsgLineExam({fiber_exam_id: this.objId}).then(res => {
        // 如果当前项为当前操作人巡视完成的，状态为未完成，设备状态为更新或新增，则显示编辑按钮支持编辑，并且状态为未完成，则显示编辑按钮支持编辑
        this.isEditable = (
          res.data.fiberMsg.TOUR_OPER_ID === this.$store.state.userData.userId &&
          res.data.fiberMsg.TASK_DET_STATE !== '99' &&
          (res.data.fiberMsg.SERVICE_STATE === 3 || res.data.fiberMsg.SERVICE_STATE === 4)
        )
        this.taskId = res.data.fiberMsg.TASK_ID;
        // 判断纤芯是否核查完毕
        res.data.fiberMsg.TOUR_STATE === 0 ? this.isFinished = false : this.isFinished = true;
        
        this.taskDetail = {
          originData: res.data,
          cableDetailArr: Object.keys(map_cable).map(item => {
            return {
              title: map_cable[item],
              text: res.data.fiberMsg[item]
            }
          }),
          tourDetailArr: Object.keys(map_tour).map(item => {
            let text = res.data.fiber_exam_msg[item];
            let color = "";
            (text === "一致") && (color = "blue");
            (text === "新增") && (color = "green");
            (text === "不存在") && (color = "red");
            (text === "更新") && (color = "yellow");
            return {
              title: map_tour[item],
              text: text,
              color: color
            }
          }),
        };

        this.files = this.files.map((item) => {
          return {
            ...item,
            img: res.data.fiberMsg.photoMap[item.type] ? this.baseUrl + res.data.fiberMsg.photoMap[item.type]: '',
          }
        })
        
        this.getFiberInfo();
      })
    },
    // 获取纤芯详情
    getFiberInfo() {
      // 已完成
      if(this.isFinished) {
        this.$api.getLineExamAccomplish({fiber_exam_id: this.objId}).then(res => {
          if(res.code === 0) {
            this.fiberDetail = res.data;
          }
        });
      }
      
      // 未完成
      else {
        this.$api.getLineMsgLineExam({fiber_exam_id: this.objId}).then(res => {
          if(res.code === 0) {
            this.fiberDetail = res.data;
          }
        });
      }
    },
    // 点击纤芯核查状态跳转
    jump(fiberInfo) {
      // 点击未核查
      if(fiberInfo.TOUR_STATE === 0) {
        let params = {
          "batchId": this.userData.batchId, //是	string	批次id
          "lindId": fiberInfo.CORE_OBJ_ID,          //是	string	纤芯id
          "line_exam_id": fiberInfo.OBJ_ID,    //是	string	纤芯巡视id
          "is_occupy": fiberInfo.IS_OCCUPY,  //是	string	是否占用
          "tour_state": fiberInfo.TOUR_STATE,      //是	string	巡视状态
          "fiber_exam_id": fiberInfo.PAR_OPT,    //是	string	光缆巡视id
        };
        // 查询当前纤芯信息（查询本端占用状态、对端核查状态、对端占用状态）
        this.$api.todoTaskApi.lineMsg(params).then(res => {
          // todo: 同步对端判断，2023.3.18要求去掉，暂时注释
          // // 如果对端已核查
          // if (res.data.lineMsg.IS_EXIST === 1) {
          //   // 如果对端未占用/对端无占用信息，询问是否跳转至纤芯完善页
          //   if (res.data.lineMsg.FRONT_OCCUPY === "5" || res.data.lineMsg.FRONT_OCCUPY === undefined) {
          //     Dialog.confirm({
          //       title: "对端纤芯已核查且未占用，是否去完善？",
          //     }).then(() => { // 确认 跳转至纤芯完善
          //       uni.navigateTo({
          //         url: `/pages/workBench/todoTask/cableTour/cableDetail/completeFiber?taskId=${this.taskId}&opticalInfo=${JSON.stringify(res.data.lineMsg)}&source=cableDetail`
          //       });
          //     });
          //   }
          //   // 如果对端已占用，跳转至纤芯核查
          //   else {
          //     uni.navigateTo({
          //       url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberInspect?obj=${JSON.stringify(fiberInfo)}&fiber_exam_id=${this.objId}`
          //     })
          //   }
          // }
          //
          // // 如果对端未核查，则显示当前纤芯信息
          // else {
          //   // 如果本端已占用，跳转至纤芯核查
          //   if(res.data.lineMsg.IS_OCCUPY !== "5" && res.data.lineMsg.IS_OCCUPY !== undefined){
          //     uni.navigateTo({
          //       url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberInspect?obj=${JSON.stringify(fiberInfo)}&fiber_exam_id=${this.objId}`
          //     })
          //   }
          //   // 如果本端未占用，跳转至纤芯完善
          //   else {
          //     uni.navigateTo({
          //       url: `/pages/workBench/todoTask/cableTour/cableDetail/completeFiber?taskId=${this.taskId}&opticalInfo=${JSON.stringify(fiberInfo)}&source=cableDetail`
          //     });
          //   }
          // }
          // 如果本端已占用，跳转至纤芯核查
          if(res.data.lineMsg.IS_OCCUPY !== "5" && res.data.lineMsg.IS_OCCUPY !== undefined){
            uni.navigateTo({
              url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberInspect?obj=${JSON.stringify(fiberInfo)}&fiber_exam_id=${this.objId}`
            })
          }
          // 如果本端未占用，跳转至纤芯完善
          else {
            uni.navigateTo({
              url: `/pages/workBench/todoTask/cableTour/cableDetail/completeFiber?taskId=${this.taskId}&opticalInfo=${JSON.stringify(fiberInfo)}&source=cableDetail`
            });
          }
        });
      }

      // 点击已核查-跳转至纤芯详情
      else {
        uni.navigateTo({
          url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberDetail?fiberInfo=${JSON.stringify(fiberInfo)}`
        })
      }
      
      // // 未核查
      // if(fiberInfo.TOUR_STATE === 0) {
      //   // 纤芯未占用 或 纤芯无占用状态，跳转至纤芯完善
      //   if(fiberInfo.IS_OCCUPY === "5" || fiberInfo.IS_OCCUPY === undefined) {
      //     // uni.navigateTo({
      //     //   url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberInspect?obj=${JSON.stringify(fiberInfo)}&fiber_exam_id=${this.objId}`
      //     // })
      //     uni.navigateTo({
      //       url: `/pages/workBench/todoTask/cableTour/cableDetail/completeFiber?taskId=${this.taskDetail.originData.fiberMsg.TASK_ID}&opticalInfo=${JSON.stringify(fiberInfo)}&source=cableDetail`
      //     });
      //   }
      //   // 纤芯被占用，跳转至纤芯核查
      //   else {
      //     uni.navigateTo({
      //       url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberInspect?obj=${JSON.stringify(fiberInfo)}&fiber_exam_id=${this.objId}`
      //     })
      //   }
      // }
      //
      // // 已核查-跳转至纤芯详情
      // else {
      //   uni.navigateTo({
      //     url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberDetail?fiberInfo=${JSON.stringify(fiberInfo)}`
      //   })
      // }
    },
    imageHandle (imgItem, imgIndex, handleType) {
      if (handleType === 'CHOOSE') {
        this.choosePhoto(imgItem, imgIndex);
      } else if (handleType === 'PREVIEW') {
        this.showPreview = true;
      } else if (handleType === 'DELETE') {
        Dialog.confirm({
          message: `是否确认删除${imgItem.previewName}`
        })
          .then(() => {
            this.$set(this.files, imgIndex, {
              ...this.files[imgIndex],
              raw: null,
              img: ''
            })
            this.delList.includes(imgItem.type) ? null: this.delList.push(imgItem.type);
              console.log(this.delList, "delete")

          })
          .catch(() => {
            // on cancel
          })
      }
    },
    choosePhoto(imgItem, imgIndex) {
      let _this = this;
      wx.chooseImage({
        count: 3,
        sourceType: ["camera"],
        success: (chooseImageRes) => {
          wx.getLocalImgData({
            localId: chooseImageRes.localIds[0].toString(),
            success: function (res) {
                const localData = res.localData;
                let imageBase64 = '';
                if (localData.indexOf('data:image') == 0) {
                    //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                    imageBase64 = localData;
                } else {
                    //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                    //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                    imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
                }
                
                _this.$set(_this.files, imgIndex, merge(_this.files[imgIndex], {
                   raw: _this.h5_url_to_blob(imageBase64),
                   img: imageBase64
                }));

                
                if (_this.delList.includes(imgItem.type)) {
                  _this.delList = _this.delList.filter(item => {
                    if (item === imgItem.type) {
                      return false;
                    }
                    
                    return true;
                  });
                }
            }
          });
        },
        fail: (error) => {
          console.log(error);
        }
      });
    },
    h5_url_to_blob(url) {
      let arr = url.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
  
    // 光缆信息重新编辑
    reEdit() {
      let params = this.taskDetail.originData;
      uni.navigateTo({
        url: `/pages/workBench/todoTask/cableTour/completeCableInfo?taskId=${this.taskId}&tourId=${params.fiberMsg.OBJ_ID}&fiberId=${params.fiberMsg.OPT_ID}&reTourCheck=0`
      });
      
      // 设备状态（1 一致  2  不存在  3  新增   4  更新）
      // 判断上次巡视结果，如果为一致/不存在，跳转核查页
      // let params = this.taskDetail.originData;
      // if(params.fiberMsg.SERVICE_STATE === 1 || params.fiberMsg.SERVICE_STATE === 2) {
      //   uni.navigateTo({
      //     url: `/pages/workBench/todoTask/cableTour/cableInspect?fiberId=${params.fiberMsg.OPT_ID}&tourId=${params.fiberMsg.OBJ_ID}&reTourCheck=0`
      //   });
      // }
      // // 如果为更新/新增，跳转完善页
      // else if(params.fiberMsg.SERVICE_STATE === 4 || params.fiberMsg.SERVICE_STATE === 3) {
      //   uni.navigateTo({
      //     url: `/pages/workBench/todoTask/cableTour/completeCableInfo?taskId=${this.taskId}&tourId=${params.fiberMsg.OBJ_ID}&fiberId=${params.fiberMsg.OPT_ID}&reTourCheck=0`
      //   });
      // }
    },
    // 未核查跳转
    noInspect() {

    },
    // 已核查跳转
    Inspect() {

    }
  }
}
</script>

<style lang="scss" scoped>

.cable-detail-wrap {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(242,246,250,1);

  .van-preview-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 100%;
      height: 60%;
    }
    img {
      height: 90%;
    }
  }
  
  .cable-state{
    width: 100vw;
    height: px2vh(140);
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 px2vw(30) 0 px2vw(49);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cable-state-title {
      font-size: px2vw(42);
    }
    .cable-state-text {
      width: px2vw(220);
      height: px2vh(80);
      border-radius: px2vw(40);
      font-size: px2vw(42);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      &.cable-state-on {
        color: rgba(255,67,85,1);
        background-color: rgba(255,67,85,0.1);
      }
      
      &.cable-state-off {
        color: rgba(65,220,131,1);
        background-color: rgba(65,220,131,0.1);
      }
    }
  }
  
  .cable-info-tab {
    width: calc(100% - #{px2vw(60)});
    height: px2vh(120);
    border-radius: px2vw(20);
    box-sizing: border-box;
    margin: px2vh(40) px2vw(30) px2vh(30);
    padding: 0 px2vw(10);
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .info-tab-item {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(51,51,51,1);
      font-size: px2vw(38);
      &.info-tab-current {
        height: px2vh(100);
        //margin-right: px2vw(10);
        border-radius: px2vw(20);
        background-color: rgba(65,122,220,1);
        color: rgba(255,255,255,1);
        font-weight: Bold;
      }
    }
  }
  
  .cable-info {
    width: calc(100% - #{px2vw(60)});
    height: calc(100vh - #{px2vh(383)});
    margin: auto;
    padding-bottom: px2vh(30);
    overflow: auto;
    
    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    
    .cable-info-container, .result-info-container {
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
    }
    
    .result-info-container {
      .yellow {
        /deep/.van-cell__value {
          color: #FFAD0E;
        }
      }
      .blue {
        /deep/.van-cell__value {
          color: #417ADC;
        }
      }
      .green {
        /deep/.van-cell__value {
          color: #41DC83;
        }
      }
      .red {
        /deep/ .van-cell__value {
          color: #FF4355;
        }
      }
    }
    
    .remark-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
      margin-top: px2vh(40);
      margin-bottom: px2vh(40);
      
      .remark-wrap {
        background-color: #FAFAFA;
        padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
        border-radius: px2vw(20);
        
        .remark-text {
          height: px2vh(150);
        }
      }
    }
    
    .patrol-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
      
      /deep/ .van-radio {
        margin-right: px2vw(139.5)
      }
      
      .image-wrap {
        width: 100%;
        display: flex;
        
        img {
          width: px2vw(215);
          height: px2vw(215);
          margin-right: px2vw(40);
          border-radius: px2vw(6);
        }
        
        .image-list {
          width: 100%;
          display: flex;
          .upload-button {
            width: px2vw(215);
            height: px2vw(215);
            background-size: cover;
            margin-right: px2vw(40);
            position: relative;
            .delete-icon {
              position: absolute;
              top: px2vw(-20);
              right: px2vw(-20);
              width: px2vw(40);
              height: px2vw(40);
              background-color: rgba(0, 0, 0, 0.7);
              border-radius: 50%;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
  
  .fibre-info {
    .fibre-rate {
      width: calc(100% - #{px2vw(60)});
      //height: px2vh(140);
      border-radius: px2vw(20);
      box-sizing: border-box;
      margin: px2vh(40) px2vw(30) px2vh(30);
      background-color: #ffffff;
      overflow: hidden;
     
      .progress-bar {
        height: px2vh(140);
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .bar-title {
          font-size: px2vw(42);
          color: rgba(65,122,220,1);
          margin-left: px2vw(40);
        }
  
        .bar-chart {
          width: px2vw(660);
          height: px2vh(34);
          margin: 0 px2vw(27) 0 px2vw(30);
          background-color: #ECF1FB;
          .bar-chart-off {
            //width: 75%;
            height: 100%;
            background: repeating-linear-gradient(135deg, #417ADC, #417ADC #{px2vw(16)},#B3CAF1 #{px2vw(16)}, #B3CAF1 #{px2vw(32)});
          }
        }
  
        .bar-text {
          font-size: px2vw(42);
          margin-right: px2vw(40);
          font-weight: bold;
          color: #7C7C7C;
          .bar-off {
            color: #417ADC;
          }
        }
      }
    }
    .fibre-rate-info {
      //margin: 0 auto px2vh(40);
      margin: 0 auto px2vh(60);
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: px2vh(54) px2vw(70);
      width: calc(100% - #{px2vw(60)});
      font-size: px2vw(40);
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
    
      .info-item {
        .value {
          margin-bottom: px2vh(26);
          font-size: px2vh(54);
          font-weight: 700;
          color: #417adc;
          text-align: center;
        }
        .label {
          font-size: px2vh(36);
          font-weight: bold;
          color: #333333;
          text-align: center;
        }
      }
    }
  }
  
  .fibre-content-title {
    width: calc(100% - #{px2vw(80)});
    box-sizing: border-box;
    margin: px2vh(0) px2vw(40) px2vh(18);
    .condition-bar {
      display: flex;
      justify-content: center;
      .condition-item {
        height: px2vh(56);
        background-color: rgba(65,122,220,0.1);
        border: #{px2vw(2)} solid rgba(65,122,220,1);
        color: rgba(65,122,220,1);
        border-radius: px2vw(6);
        font-size: px2vw(30);
        padding: 0 px2vw(16) 0 px2vw(19);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 px2vw(5);
        &:last-child {
          margin-right: 0;
        }
        &.condition-item-checked {
          background-color: rgba(65,122,220,1);
          color: rgba(255,255,255,1);
        }
      }
    }
  }
  
  .fibre-pair-list {
    height: calc(100vh - #{px2vh(613)});
    overflow: auto;
    .fibre-pair-item {
      width: calc(100% - #{px2vw(60)});
      border-radius: px2vw(20);
      box-sizing: border-box;
      margin: px2vh(40) px2vw(30) px2vh(40);
      padding: 8px 0;
      background-color: #ffffff;
      
      .fibre-pair-detail {
        min-height: px2vh(140);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .replace-index {
          margin: 0 px2vw(28) 0 px2vw(40);
          width: px2vw(64);
          height: px2vw(64);
          border-radius: 50%;
          background: radial-gradient(circle at center,#417ADC, #417ADC #{px2vw(23)}, #ffffff #{px2vw(23)},#ffffff #{px2vw(26)}, #417ADC #{px2vw(26)}, #417ADC 100%);
          color: #ffffff;
          font-size: px2vw(36);
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    
    
        .replace-text {
          width: px2vw(645);
          font-size: px2vw(46);
          font-weight: bold;
          color: #666666;
        }
        .replace-state {
          font-size: px2vw(42);
          margin-right: px2vw(39);
          
          &.replace-state-on {
            color: #41DC83;
          }
          
          &.replace-state-off {
            color: #FF4355;
          }
        }
      }
      

      .replace-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      .top-replace-main {
        width: px2vw(900);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(60);
        .replace-big-ltitle,.replace-big-rtitle {
          color: #666;
        }
        .replace-small-ltitle,.replace-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        .replace-big-rtitle {
          margin-left: px2vw(245);
        }
      }
    }
  }
  /deep/.van-button {
    margin-top: px2vh(30);
    height: px2vh(120);
    color: #fff;
    background-color: #417adc;
    border: 1px solid #417adc;
    border-radius: px2vh(60);
  }
  @keyframes wordsLoop {
    0% {
      transform: translateX(10%);
      -webkit-transform: translateX(10%);
    }
    100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
  }
}
</style>